/******************************************************************************
* File description: SettingModelConfig.qml
* Function: 设置-模型配置
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-30
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */
    // 表格数据
    property var tableModels: []
    // 显示记录的表格数据
    property var savedTableData: []

    // 私有
    // 渲染的表格数据
    property var _tableModel: root.tableModels
    // 表头数组
    property var _horHeaderData: ["序号", "基因分析仪", "试剂盒类型", "试剂盒名称", "体系(μl)", "创建时间", "备注"]
    // 表头高度
    property int _horHeaderHeight: 40
    // 表格行高
    property int _tableItemHeight: 40
    // 复选框列宽度
    property int _comboBoxColWidth: 40
    // 序号列宽度
    property int _noColWidth: 60

    // 信号
    // 内部

    // 发给c++
    signal filterPage(); // 筛选
    signal hunhePage(); // 混合
    signal changePwdPage(); // 修改密码
    signal settingReturnSig();

    /* property 定义结束 */

    // 顶部导航栏
    TabbarNav {
        id: tabNav
        width: parent.width
        isEnable: true
        title: "模型配置"

        onReturnSig: {
            root.settingReturnSig()
            console.log("tabbar nav")
        }
        z: 999
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 主体部分
        Rectangle {
            id: mainPart
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height - btnContainer.height
            Layout.alignment: Qt.AlignTop

            // 背景
            Rectangle {
                anchors.fill: parent
                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, height)
                    gradient: Gradient {
                        GradientStop {position: 0.0; color: "#007BD8"}
                        GradientStop {position: 1.0; color: "#001A5A"}
                    }
                }
            }

            // 内容
            Rectangle {
                id: contentCon
                anchors {
                    fill: parent
                    topMargin: 16 + tabNav.height
                    margins: 16
                }
                color: "#C3FFFFFF"
                clip: true

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Rectangle {
                        width: contentCon.width
                        height: contentCon.height
                        radius: 12
                    }
                }

                // 表格部分
                Item {
                    id: tableViewContainer
                    anchors.fill: parent

                    ButtonGroup {
                        id: checkButtonGroup
                        exclusive: false
                        checkState: headerCheckBox.checkState
                    }

                    // 横向表头
                    Item {
                        id: horizontalHeader
                        height: _horHeaderHeight
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.right: parent.right

                        Row {
                            spacing: 0

                            // 复选框
                            Item {
                                id: headerCheckBoxCon
                                width: root._comboBoxColWidth
                                height: horizontalHeader.height

                                // 复选框
                                CustomCheckBox {
                                    id: headerCheckBox
                                    width: checkWidth
                                    height: checkHeight
                                    checkWidth: 16
                                    checkHeight: 16
                                    anchors.centerIn: parent
                                    checkBoxText: "     " // 这里传空串会导致复选框失效
                                    checkBoxFontPixelSize: 0
                                    spacing: 0
                                    z: 999
                                    checkState: checkButtonGroup.checkState
                                }

                                // 背景
                                Rectangle {
                                    anchors.fill: parent
                                    border.width: 0
                                    color: "#FFEBF3FF"
                                }

                                // 画边框
                                Canvas {
                                    id: horHeaderCkeckBoxCanvas
                                    antialiasing: true
                                    anchors.fill: parent
                                    onPaint: {
                                        var ctx = getContext("2d")
                                        ctx.clearRect(0, 0, width, height)
                                        ctx.strokeStyle = "#FFDEDEDE"
                                        ctx.lineWidth = 2
                                        ctx.beginPath()

                                        // 左边框
                                        ctx.moveTo(0, 0)
                                        ctx.lineTo(0, height)
                                        ctx.stroke()

                                        // 上边框
                                        ctx.moveTo(0, 0)
                                        ctx.lineTo(width, 0)
                                        ctx.stroke()

                                        // 下边框
                                        ctx.moveTo(0, height)
                                        ctx.lineTo(width, height)
                                        ctx.stroke()
                                    }
                                }
                            }

                            Repeater {
                                model: _horHeaderData

                                Item {
                                    width: index === 0 ? root._noColWidth
                                                       :
                                                         (horizontalHeader.width -
                                                          root._comboBoxColWidth - root._noColWidth) /
                                                         (_horHeaderData.length - 1)
                                    height: horizontalHeader.height

                                    Rectangle {
                                        anchors.fill: parent
                                        border.width: 0
                                        color: "#FFEBF3FF"

                                        Text {
                                            text: qsTr(modelData)
                                            anchors.centerIn: parent
                                            font.pixelSize: 16
                                            font.family: "Alibaba PuHuiTi"
                                            color: "#222"
                                        }
                                    }

                                    // 画边框
                                    Canvas {
                                        id: horHeaderCanvas
                                        antialiasing: true
                                        anchors.fill: parent
                                        onPaint: {
                                            var ctx = getContext("2d")
                                            ctx.clearRect(0, 0, width, height)
                                            ctx.strokeStyle = "#FFDEDEDE"
                                            ctx.lineWidth = 2
                                            ctx.beginPath()

                                            // 左边框
                                            ctx.moveTo(0, 0)
                                            ctx.lineTo(0, height)
                                            ctx.stroke()

                                            // 上边框
                                            ctx.moveTo(0, 0)
                                            ctx.lineTo(width, 0)
                                            ctx.stroke()

                                            // 下边框
                                            ctx.moveTo(0, height)
                                            ctx.lineTo(width, height)
                                            ctx.stroke()
                                        }
                                    }

                                    // 右边框
                                    Canvas {
                                        id: horHeaderCanvasRightBorder
                                        visible: index === (_horHeaderData.length - 1)
                                        antialiasing: true
                                        anchors.fill: parent
                                        onPaint: {
                                            var ctx = getContext("2d")
                                            ctx.clearRect(0, 0, width, height)
                                            ctx.strokeStyle = "#FFDEDEDE"
                                            ctx.lineWidth = 2
                                            ctx.beginPath()
                                            ctx.moveTo(width, 0)
                                            ctx.lineTo(width, height)
                                            ctx.closePath()
                                            ctx.stroke()
                                        }
                                    }

                                    onWidthChanged: {
                                        horHeaderCanvasRightBorder.requestPaint()
                                    }
                                }
                            }
                        }
                    }

                    // tableview
                    TableView {
                        id: tableContent
                        height: parent.height - horizontalHeader.height
                        anchors {
                            top: parent.top
                            topMargin: _horHeaderHeight
                            left: parent.left
                            right: parent.right
                        }
                        clip: true
                        boundsBehavior: Flickable.StopAtBounds
                        columnSpacing: 0
                        rowSpacing: 0

                        columnWidthProvider: function(column){
                            return column === 0 ? root._comboBoxColWidth
                                                :
                                                  column === 1 ? root._noColWidth
                                                               :
                                                                 (horizontalHeader.width -
                                                                  root._comboBoxColWidth - root._noColWidth) /
                                                                 (_horHeaderData.length - 1)
                        }

                        rowHeightProvider: function(row){
                            return _tableItemHeight
                        }

                        model: TableModel {
                            id: tableModel

                            TableModelColumn {display: "复选"}
                            TableModelColumn {display: "序号"}
                            TableModelColumn {display: "基因分析仪"}
                            TableModelColumn {display: "试剂盒类型"}
                            TableModelColumn {display: "试剂盒名称"}
                            TableModelColumn {display: "体系(μl)"}
                            TableModelColumn {display: "创建时间"}
                            TableModelColumn {display: "备注"}
                            rows: _tableModel
                        }

                        delegate: DelegateChooser {
                            id: itemDele

                            // 复选框
                            DelegateChoice {
                                id: checkedItem

                                column: 0
                                delegate: Item {
                                    id: checkedItemDelegate
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)

                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    CustomCheckBox {
                                        id: checkBoxItem
                                        width: checkWidth
                                        height: checkHeight
                                        checkWidth: 16
                                        checkHeight: 16
                                        anchors.centerIn: parent
                                        checkBoxText: "     " // 这里传空串会导致复选框失效
                                        checkBoxFontPixelSize: 0
                                        spacing: 0
                                        ButtonGroup.group: checkButtonGroup
                                    }

                                    // 边框
                                    Canvas {
                                        id: checkedBoxCanvas
                                        anchors.fill: parent
                                        antialiasing: true
                                        onPaint: {
                                            var ctx = getContext("2d")
                                            ctx.strokeStyle = "#FFCCCCCC"
                                            ctx.lineWidth = 2
                                            // 左边框
                                            ctx.moveTo(0, 0)
                                            ctx.lineTo(0, height)
                                            ctx.stroke()
                                            // 下边框
                                            ctx.moveTo(0, height)
                                            ctx.lineTo(width, height)
                                            ctx.stroke()
                                        }
                                    }
                                }
                            }

                            // 序号
                            DelegateChoice {
                                id: noItem
                                column: 1
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)

                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: noLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: noCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }

                            // 基因分析仪
                            DelegateChoice {
                                id: deviceItem
                                column: 2
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)

                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: deviceLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: deviceCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }

                            // 试剂盒类型
                            DelegateChoice {
                                id: shijieheTypeItem
                                column: 3
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)

                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: shijieheTypeLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: shijiheTypeCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }

                            // 试剂盒名称
                            DelegateChoice {
                                id: shijieheNameItem
                                column: 4
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)

                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: shijieheNameLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: shijiheNameCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }

                            // 体系
                            DelegateChoice {
                                id: tiXiItem
                                column: 5
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)
                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: tiXiLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: tiXiCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }

                            // 创建时间
                            DelegateChoice {
                                id: createTimeItem
                                column: 6
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)
                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: createTimeLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: createTimeCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }

                            // 备注
                            DelegateChoice {
                                id: noteItem
                                column: 7
                                delegate: Item {
                                    width: tableContent.columnWidthProvider(column)
                                    height: tableContent.rowHeightProvider(0)
                                    // 背景
                                    Rectangle {
                                        anchors.fill: parent
                                        color: "#FFEBF3FF"
                                        border.width: 0
                                    }

                                    Label {
                                        id: noteLabel
                                        width: tableContent.columnWidthProvider(column)
                                        height: tableContent.rowHeightProvider(0)
                                        font.pixelSize: 16
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        text: display

                                        // 边框
                                        Canvas {
                                            id: noteCanvas
                                            anchors.fill: parent
                                            antialiasing: true
                                            onPaint: {
                                                var ctx = getContext("2d")
                                                ctx.strokeStyle = "#FFCCCCCC"
                                                ctx.lineWidth = 2
                                                // 左边框
                                                ctx.moveTo(0, 0)
                                                ctx.lineTo(0, height)
                                                ctx.stroke()
                                                // 下边框
                                                ctx.moveTo(0, height)
                                                ctx.lineTo(width, height)
                                                ctx.stroke()
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        // 事件
                        onWidthChanged: {
                            tableContent.forceLayout() // 强制重新布局刷新视图
                        }

                        onHeightChanged: {
                            tableContent.forceLayout() // 强制重新布局刷新视图
                        }

                        // 组件加载完毕
                        Component.onCompleted: {
                            // 渲染数据
                            // root.renderHunheTable();

                            root.tableModels = [
                                        {"复选": "", "序号": "123", "基因分析仪": "123", "试剂盒类型": "123", "试剂盒名称": "123", "体系(μl)": "123", "创建时间": "123", "备注": "123"}
                                    ]
                        }
                    }
                }
            }
        }

        // 按钮部分
        Rectangle {
            id: btnContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 80

            RowLayout {
                anchors.fill: parent
                anchors.rightMargin: 16
                anchors.leftMargin: 16

                GradientButton {
                    id: hunHeBtn
                    gradText: "混合判定(M)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                    onReleased: {
                        root.hunhePage()
                    }
                }

                PureButton {
                    id: changePwdBtn
                    pureText: "修改密码(M)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                    onReleased: {
                        root.changePwdPage()
                    }
                }

                CustomHorSpacerItem {}

                PureButton {
                    id: delBtn
                    pureText: "删除(D)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                }

                PureButton {
                    id: filterBtn
                    pureText: "筛选(S)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                    onReleased: {
                        root.filterPage()
                    }
                }

                GradientButton {
                    id: importBtn
                    gradText: "导入模型(I)"
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                }
            }
        }
    }
}
